var webpack = require('webpack');
var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');//提取公共代码 // 默认会把所有入口节点的公共代码提取出来,生成一个common.js
//PostCSS plugins
var autoprefixer = require('autoprefixer'); ////自动添加前缀的插件
var ExtractTextPlugin = require("extract-text-webpack-plugin"); //该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象
var babelpolyfill = require("babel-polyfill");
module.exports = {
  // entry是入口文件，可以多个，代表要编译那些js
  //entry:['./src/main.js','./src/login.js','./src/reg.js'],
    entry: { main: './src/main.js'}, //入口文件路径
    output: {
        path: path.join(__dirname, './dist/'), //文件输出目录 //“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录
        publicPath: './dist/',
        filename: '[name].js', //打包后输出文件的文件名
        chunkFilename: "[name].page.js",//output设置里面，[name]代表entry的每一个键值
        assetsPublicPath: '/'
    },
    plugins: [commonsPlugin,new ExtractTextPlugin("[name].css"),new HtmlWebpackPlugin()],
    module: {
        loaders: [
            {
                test: /\.css$/,  //一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
                include: [
                  '/src/',//表示在src目录下的css需要编译
                  '/node_modules/element-ui/lib/'   //增加此项
                ],
              loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!postcss-loader!less-loader' }) //loader的名称（必须）
            },
            {
              test: /\.less$/,
              loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!less-loader")
            },
           /* {
                test: /\.(jpg|png|woff|ttf|svg|gif)$/,
                loader: 'file-loader'
            },*/
            {
              test: /\.(jpg|png)$/,
              loader: 'url-loader?limit=8192' //小于8K
            },
            {
              test: /\.(woff|ttf|svg|gif)$/,
              loader: 'file-loader'
            },
            {
                test: /\.json$/,
                loader: 'json'
            },
          {
            test: /\.js$/,
            loader: 'babel',
            include: [
              path.resolve(__dirname, 'src'),
            ]
          }
        ]
    },
    postcss: [ //我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。
        autoprefixer({browsers: ['last 2 versions', "> 1%"]}) //自动添加前缀的插件
    ],
    resolve: { //resolve.root 表示添加默认搜索路径
        root: [
            path.resolve(__dirname),//路径寻航,相当于不断进行cd
            path.resolve(__dirname,'build'),
            path.resolve(__dirname,'src')
        ],
      //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            //validate: 'js/jquery.validate.js' //后续直接 require('validate') 即可
          'vue$': 'vue/dist/vue.common.js'
        },
        extensions: ['', '.js']
    }
};

